<template>
	<div class="top">
		<span class="topTitle">{{RenGouTitle}}</span>
		<div class="subInfo">
			<span>{{Lang.top[lang][0]}}:<span>{{AllNumber}}</span></span>
			<span>{{Lang.top[lang][1]}}:<span>{{buyNumber}}</span></span>
			<span>{{Lang.top[lang][2]}}:<span>{{frgPrice}}</span></span>
		</div>
		<span>{{Lang.top[lang][3]}}：<span>{{Util.formatTime(fendTime)}}</span></span>
		<div class="timeContainer">
			<div
				class="timeLine"
				:style="{width:gdA(buyNumber, AllNumber)}"
			></div>
		</div>
	</div>
</template>

<script>
	import eventsVue from '../events'
	import {vpost, imgpost, kpost, vlink, klink} from '@api'
	import {Util} from '../tools'
	import Lang from '../lang'
	export default {
		name: '',
		data() {
			return {
				RenGouTitle:'',//Title
				AllNumber:'',//总量
				buyNumber:'',//已认购数
				frgPrice:'',//认购价格
				num: 10,
				total: 100,
				fendTime:'',
				Util,
				timer:'',//倒计时
				Lang,
			}
		},

		components: {},

		computed: {
			lang() {
				return this.$store.state.setting.lang
			},
		},

		methods: {
			/**
			 * @Description: ${获取认购信息}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/12/3
			 * @Version 1.0
			 */
			getSubscriptionInfo(){
				vpost(vlink.subscriptionCenter.getSubscriptionInfo,{}).then(re=>{
					console.log('认购信息',re)
					if(re.state == 0){
						this.RenGouTitle = re.ftrademappings[0].coinName
						this.AllNumber = re.ftrademappings[0].ftotal
						this.frgPrice = re.ftrademappings[0].frgPrice

						for(var i in re.mapSell){
							this.buyNumber = re.mapSell[i]
						}
						this.fendTime = re.ftrademappings[0].fendTime
						eventsVue.$emit('getID',re.ftrademappings[0].fid)
					}
				})
			},
			/**
			 * @Description: ${定时请求}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/12/12
			 * @Version 1.0
			 */
			getTimer(){
				this.timer = setInterval(()=>{
					this.getSubscriptionInfo()
				},1000)
			},
			/**
			 * 计算百分比
			 */
			gdA(sellCount, rgamount) {
				return `${(sellCount / rgamount) * 100}%`
			},
		},

		mounted() {
			this.getSubscriptionInfo()
			this.getTimer()
		},
		created(){
			eventsVue.$on('subId',(i)=>{
				this.buyNumber = i
			})
		},
		destroyed() {
			clearInterval(this.timer)
		}
	}
</script>

<style scoped>
	.top {
		width: 100%;
		height: 15vh;
		background-color: #181b2a;
		color: #c7cce6;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 6px;
	}

	.topTitle {
		font-size: 20px;
		display: inline-block;
		margin: 10px 0;
		font-weight: 700;
	}

	.subInfo > span {
		display: inline-block;
		margin-left: 30px;
		color: white;
	}

	.timeContainer {
		width: 95%;
		height: 8px;
		border: 1px solid #66ccff;
		border-radius: 4px;
		margin: 15px 0;
	}

	.timeLine {
		width: 100%;
		height: 8px;
		background-color: #66ccff;
	}
</style>
